var Site = {

    loadTemplate: function(selector, template) {
        var html = _.template(template);
        $(selector).append(html())
    },

    loadGallery: function(navSelector, galSelector) {
        $.ajax({
            url: "/rest/categories",
            dataType: "json",
            cache: false,
            success: function(json) {
                var html = _.template(t_gallery_navigation, json);
                $(navSelector).append(html);
                Site.loadGalleryImages(galSelector, json.categories[0]);
            },
            error: function(result) {
                $(navSelector).append("<p>Error while retrieving categories from server.</p>");
            }
        })
    },

    loadGalleryImages: function(selector, category) {
        $.ajax({
            url: "/rest/img/" + category,
            dataType: "json",
            cache: false,
            success: function(json) {
                $(selector).empty();

                var html = _.template(t_gallery_images, json);
                $(selector).append(html);
            },
            error: function(result) {
                $(selector).append("<p>Error while retrieving categorie images from server.</p>");
            }
        })
    },

    contact: function(e) {
        e.preventDefault();

        var form = $(this).serialize();

        $.ajax({
            url: "/rest/post",
            dataType: "json",
            contentType: "application/json",
            type: "post",
            data: {"name": "aaa"}
        })
    },

    maximizeImage: function(image) {
        var image = $(image).attr("src"),
            screen_width = $(window).width(),
            screen_height = $(window).height();

        var html="<img src='" + image + "' height='" + (screen_height - 200) + "' onclick='Site.hideImage()'/>";

        $("div.maxImg").append(html);
        $("div.maxImg").css({display: "inline"});


        var img_width = $("div.maxImg img").width();
        $("div.maxImg img").css({position: "absolute", top: "100px", left: (screen_width -img_width)/2 });
    },

    hideImage: function() {
        $("div.maxImg").empty();
        $("div.maxImg").css({display: "none"});
    }
}

